import type { LayoutStore } from '@/types'
import type { BLayoutProps } from '@/components/type'

const useLayoutStore = defineStore('layoutStore', {
  state: (): LayoutStore => ({
    model: 'side',
    isCollapseAside: false,
    isFullScreen: false,
    isAnimate: false,
    animateOptions: {
      fullscreen: false,
      showTitle: false,
      title: '',
    },
  }),
  getters: {},
  actions: {
    async switchModel(m?: LayoutStore['model']) {
      if (!m) {
        m = this.model === 'side' ? 'top' : 'side'
      }
      this.model = m
      await nextTick()
      this.isCollapseAside = false
    },
    switchAside(bol?: boolean) {
      this.isCollapseAside = bol ?? !this.isCollapseAside
    },
    setAnimateState(
      open = true,
      options: BLayoutProps = {
        fullscreen: false,
        showTitle: false,
        title: '加载中...',
      },
    ) {
      open !== this.isAnimate && (this.isAnimate = open)
      Object.assign(this.animateOptions, options)
    },
  },
  persist: {
    paths: ['model', 'isCollapseAside'],
    beforeRestore(context) {
      const model = context.store.$state.model
      context.store.switchModel(model)
    },
  },
})

export default useLayoutStore
